<title>字体图标 Mfglabs</title>

<link rel="stylesheet" href="/vendor/bootstrap-slider/bootstrap-slider.css">
<link rel="stylesheet" href="/fonts/mfglabs/mfglabs.css">
<link rel="stylesheet" href="/css/examples/components/basic/icon.css">

<div class="page animation-fade">
    <div class="page-header">
        <ol class="breadcrumb">
            <li>
                <a href="/examples/components/basic/icons.html" data-pjax>矢量图标</a>
            </li>
            <li class="active">Mfglabs</li>
        </ol>
        <div class="page-header-actions">
            <a class="btn btn-default btn-outline btn-round" href="http://mfglabs.github.io/mfglabs-iconset/" target="_blank">
                <i class="icon wb-link" aria-hidden="true"></i> <span class="hidden-xs">官网</span></a>
        </div>
    </div>
    <div class="page-content container-fluid">
        <div class="row padding-vertical-30">
            <div class="col-sm-12 text-center">
                <h2>Mfglabs 图标搜索</h2>
                <form role="search">
                    <div class="input-search">
                        <input type="text" class="form-control round" placeholder="搜索图标...">
                        <button type="submit" class="input-search-btn">
                            <i class="icon wb-search" aria-hidden="true"></i>
                        </button>
                    </div>
                </form>
                <div class="width-300 center-block margin-vertical-25">
                    <input id="iconChange" class="icon-slider" type="text" data-plugin="bootstrapSlider" data-slider-min="16" data-slider-max="64" data-slider-step="1" data-slider-value="24" data-slider-tooltip="always">
                </div>
            </div>
        </div>
        <div class="panel">
            <div class="panel-body container-fluid">
                <div class="row">
                    <div class="col-lg-1 col-md-2 col-sm-3 col-xs-4 icondemo-wrap vertical-align" data-name="cloud">
                        <div class="icondemo vertical-align-middle">
                            <i class="icon ml-cloud" aria-hidden="true"></i>
                            <div class="icon-title">cloud</div>
                        </div>
                    </div>
                    <div class="col-lg-1 col-md-2 col-sm-3 col-xs-4 icondemo-wrap vertical-align" data-name="at">
                        <div class="icondemo vertical-align-middle">
                            <i class="icon ml-at" aria-hidden="true"></i>
                            <div class="icon-title">at</div>
                        </div>
                    </div>
                    <div class="col-lg-1 col-md-2 col-sm-3 col-xs-4 icondemo-wrap vertical-align" data-name="plus">
                        <div class="icondemo vertical-align-middle">
                            <i class="icon ml-plus" aria-hidden="true"></i>
                            <div class="icon-title">plus</div>
                        </div>
                    </div>
                    <div class="col-lg-1 col-md-2 col-sm-3 col-xs-4 icondemo-wrap vertical-align" data-name="minus">
                        <div class="icondemo vertical-align-middle">
                            <i class="icon ml-minus" aria-hidden="true"></i>
                            <div class="icon-title">minus</div>
                        </div>
                    </div>
                    <div class="col-lg-1 col-md-2 col-sm-3 col-xs-4 icondemo-wrap vertical-align" data-name="arrow_up">
                        <div class="icondemo vertical-align-middle">
                            <i class="icon ml-arrow_up" aria-hidden="true"></i>
                            <div class="icon-title">arrow_up</div>
                        </div>
                    </div>
                    <div class="col-lg-1 col-md-2 col-sm-3 col-xs-4 icondemo-wrap vertical-align" data-name="arrow_down">
                        <div class="icondemo vertical-align-middle">
                            <i class="icon ml-arrow_down" aria-hidden="true"></i>
                            <div class="icon-title">arrow_down</div>
                        </div>
                    </div>
                    <div class="col-lg-1 col-md-2 col-sm-3 col-xs-4 icondemo-wrap vertical-align" data-name="arrow_right">
                        <div class="icondemo vertical-align-middle">
                            <i class="icon ml-arrow_right" aria-hidden="true"></i>
                            <div class="icon-title">arrow_right</div>
                        </div>
                    </div>
                    <div class="col-lg-1 col-md-2 col-sm-3 col-xs-4 icondemo-wrap vertical-align" data-name="arrow_left">
                        <div class="icondemo vertical-align-middle">
                            <i class="icon ml-arrow_left" aria-hidden="true"></i>
                            <div class="icon-title">arrow_left</div>
                        </div>
                    </div>
                    <div class="col-lg-1 col-md-2 col-sm-3 col-xs-4 icondemo-wrap vertical-align" data-name="chevron_down">
                        <div class="icondemo vertical-align-middle">
                            <i class="icon ml-chevron_down" aria-hidden="true"></i>
                            <div class="icon-title">chevron_down</div>
                        </div>
                    </div>
                    <div class="col-lg-1 col-md-2 col-sm-3 col-xs-4 icondemo-wrap vertical-align" data-name="chevron_up">
                        <div class="icondemo vertical-align-middle">
                            <i class="icon ml-chevron_up" aria-hidden="true"></i>
                            <div class="icon-title">chevron_up</div>
                        </div>
                    </div>
                    <div class="col-lg-1 col-md-2 col-sm-3 col-xs-4 icondemo-wrap vertical-align" data-name="chevron_right">
                        <div class="icondemo vertical-align-middle">
                            <i class="icon ml-chevron_right" aria-hidden="true"></i>
                            <div class="icon-title">chevron_right</div>
                        </div>
                    </div>
                    <div class="col-lg-1 col-md-2 col-sm-3 col-xs-4 icondemo-wrap vertical-align" data-name="chevron_left">
                        <div class="icondemo vertical-align-middle">
                            <i class="icon ml-chevron_left" aria-hidden="true"></i>
                            <div class="icon-title">chevron_left</div>
                        </div>
                    </div>
                    <div class="col-lg-1 col-md-2 col-sm-3 col-xs-4 icondemo-wrap vertical-align" data-name="reorder">
                        <div class="icondemo vertical-align-middle">
                            <i class="icon ml-reorder" aria-hidden="true"></i>
                            <div class="icon-title">reorder</div>
                        </div>
                    </div>
                    <div class="col-lg-1 col-md-2 col-sm-3 col-xs-4 icondemo-wrap vertical-align" data-name="list">
                        <div class="icondemo vertical-align-middle">
                            <i class="icon ml-list" aria-hidden="true"></i>
                            <div class="icon-title">list</div>
                        </div>
                    </div>
                    <div class="col-lg-1 col-md-2 col-sm-3 col-xs-4 icondemo-wrap vertical-align" data-name="reorder_square">
                        <div class="icondemo vertical-align-middle">
                            <i class="icon ml-reorder_square" aria-hidden="true"></i>
                            <div class="icon-title">reorder_square</div>
                        </div>
                    </div>
                    <div class="col-lg-1 col-md-2 col-sm-3 col-xs-4 icondemo-wrap vertical-align" data-name="reorder_square_line">
                        <div class="icondemo vertical-align-middle">
                            <i class="icon ml-reorder_square_line" aria-hidden="true"></i>
                            <div class="icon-title">reorder_square_line</div>
                        </div>
                    </div>
                    <div class="col-lg-1 col-md-2 col-sm-3 col-xs-4 icondemo-wrap vertical-align" data-name="coverflow">
                        <div class="icondemo vertical-align-middle">
                            <i class="icon ml-coverflow" aria-hidden="true"></i>
                            <div class="icon-title">coverflow</div>
                        </div>
                    </div>
                    <div class="col-lg-1 col-md-2 col-sm-3 col-xs-4 icondemo-wrap vertical-align" data-name="coverflow_line">
                        <div class="icondemo vertical-align-middle">
                            <i class="icon ml-coverflow_line" aria-hidden="true"></i>
                            <div class="icon-title">coverflow_line</div>
                        </div>
                    </div>
                    <div class="col-lg-1 col-md-2 col-sm-3 col-xs-4 icondemo-wrap vertical-align" data-name="pause">
                        <div class="icondemo vertical-align-middle">
                            <i class="icon ml-pause" aria-hidden="true"></i>
                            <div class="icon-title">pause</div>
                        </div>
                    </div>
                    <div class="col-lg-1 col-md-2 col-sm-3 col-xs-4 icondemo-wrap vertical-align" data-name="play">
                        <div class="icondemo vertical-align-middle">
                            <i class="icon ml-play" aria-hidden="true"></i>
                            <div class="icon-title">play</div>
                        </div>
                    </div>
                    <div class="col-lg-1 col-md-2 col-sm-3 col-xs-4 icondemo-wrap vertical-align" data-name="step_forward">
                        <div class="icondemo vertical-align-middle">
                            <i class="icon ml-step_forward" aria-hidden="true"></i>
                            <div class="icon-title">step_forward</div>
                        </div>
                    </div>
                    <div class="col-lg-1 col-md-2 col-sm-3 col-xs-4 icondemo-wrap vertical-align" data-name="step_backward">
                        <div class="icondemo vertical-align-middle">
                            <i class="icon ml-step_backward" aria-hidden="true"></i>
                            <div class="icon-title">step_backward</div>
                        </div>
                    </div>
                    <div class="col-lg-1 col-md-2 col-sm-3 col-xs-4 icondemo-wrap vertical-align" data-name="fast_forward">
                        <div class="icondemo vertical-align-middle">
                            <i class="icon ml-fast_forward" aria-hidden="true"></i>
                            <div class="icon-title">fast_forward</div>
                        </div>
                    </div>
                    <div class="col-lg-1 col-md-2 col-sm-3 col-xs-4 icondemo-wrap vertical-align" data-name="fast_backward">
                        <div class="icondemo vertical-align-middle">
                            <i class="icon ml-fast_backward" aria-hidden="true"></i>
                            <div class="icon-title">fast_backward</div>
                        </div>
                    </div>
                    <div class="col-lg-1 col-md-2 col-sm-3 col-xs-4 icondemo-wrap vertical-align" data-name="cloud_upload">
                        <div class="icondemo vertical-align-middle">
                            <i class="icon ml-cloud_upload" aria-hidden="true"></i>
                            <div class="icon-title">cloud_upload</div>
                        </div>
                    </div>
                    <div class="col-lg-1 col-md-2 col-sm-3 col-xs-4 icondemo-wrap vertical-align" data-name="cloud_download">
                        <div class="icondemo vertical-align-middle">
                            <i class="icon ml-cloud_download" aria-hidden="true"></i>
                            <div class="icon-title">cloud_download</div>
                        </div>
                    </div>
                    <div class="col-lg-1 col-md-2 col-sm-3 col-xs-4 icondemo-wrap vertical-align" data-name="data_science">
                        <div class="icondemo vertical-align-middle">
                            <i class="icon ml-data_science" aria-hidden="true"></i>
                            <div class="icon-title">data_science</div>
                        </div>
                    </div>
                    <div class="col-lg-1 col-md-2 col-sm-3 col-xs-4 icondemo-wrap vertical-align" data-name="data_science_black">
                        <div class="icondemo vertical-align-middle">
                            <i class="icon ml-data_science_black" aria-hidden="true"></i>
                            <div class="icon-title">data_science_black</div>
                        </div>
                    </div>
                    <div class="col-lg-1 col-md-2 col-sm-3 col-xs-4 icondemo-wrap vertical-align" data-name="globe">
                        <div class="icondemo vertical-align-middle">
                            <i class="icon ml-globe" aria-hidden="true"></i>
                            <div class="icon-title">globe</div>
                        </div>
                    </div>
                    <div class="col-lg-1 col-md-2 col-sm-3 col-xs-4 icondemo-wrap vertical-align" data-name="globe_black">
                        <div class="icondemo vertical-align-middle">
                            <i class="icon ml-globe_black" aria-hidden="true"></i>
                            <div class="icon-title">globe_black</div>
                        </div>
                    </div>
                    <div class="col-lg-1 col-md-2 col-sm-3 col-xs-4 icondemo-wrap vertical-align" data-name="math_ico">
                        <div class="icondemo vertical-align-middle">
                            <i class="icon ml-math_ico" aria-hidden="true"></i>
                            <div class="icon-title">math_ico</div>
                        </div>
                    </div>
                    <div class="col-lg-1 col-md-2 col-sm-3 col-xs-4 icondemo-wrap vertical-align" data-name="math">
                        <div class="icondemo vertical-align-middle">
                            <i class="icon ml-math" aria-hidden="true"></i>
                            <div class="icon-title">math</div>
                        </div>
                    </div>
                    <div class="col-lg-1 col-md-2 col-sm-3 col-xs-4 icondemo-wrap vertical-align" data-name="math_black">
                        <div class="icondemo vertical-align-middle">
                            <i class="icon ml-math_black" aria-hidden="true"></i>
                            <div class="icon-title">math_black</div>
                        </div>
                    </div>
                    <div class="col-lg-1 col-md-2 col-sm-3 col-xs-4 icondemo-wrap vertical-align" data-name="paperplane_ico">
                        <div class="icondemo vertical-align-middle">
                            <i class="icon ml-paperplane_ico" aria-hidden="true"></i>
                            <div class="icon-title">paperplane_ico</div>
                        </div>
                    </div>
                    <div class="col-lg-1 col-md-2 col-sm-3 col-xs-4 icondemo-wrap vertical-align" data-name="paperplane">
                        <div class="icondemo vertical-align-middle">
                            <i class="icon ml-paperplane" aria-hidden="true"></i>
                            <div class="icon-title">paperplane</div>
                        </div>
                    </div>
                    <div class="col-lg-1 col-md-2 col-sm-3 col-xs-4 icondemo-wrap vertical-align" data-name="paperplane_black">
                        <div class="icondemo vertical-align-middle">
                            <i class="icon ml-paperplane_black" aria-hidden="true"></i>
                            <div class="icon-title">paperplane_black</div>
                        </div>
                    </div>
                    <div class="col-lg-1 col-md-2 col-sm-3 col-xs-4 icondemo-wrap vertical-align" data-name="color_balance">
                        <div class="icondemo vertical-align-middle">
                            <i class="icon ml-color_balance" aria-hidden="true"></i>
                            <div class="icon-title">color_balance</div>
                        </div>
                    </div>
                    <div class="col-lg-1 col-md-2 col-sm-3 col-xs-4 icondemo-wrap vertical-align" data-name="star">
                        <div class="icondemo vertical-align-middle">
                            <i class="icon ml-star" aria-hidden="true"></i>
                            <div class="icon-title">star</div>
                        </div>
                    </div>
                    <div class="col-lg-1 col-md-2 col-sm-3 col-xs-4 icondemo-wrap vertical-align" data-name="star_half">
                        <div class="icondemo vertical-align-middle">
                            <i class="icon ml-star_half" aria-hidden="true"></i>
                            <div class="icon-title">star_half</div>
                        </div>
                    </div>
                    <div class="col-lg-1 col-md-2 col-sm-3 col-xs-4 icondemo-wrap vertical-align" data-name="star_empty">
                        <div class="icondemo vertical-align-middle">
                            <i class="icon ml-star_empty" aria-hidden="true"></i>
                            <div class="icon-title">star_empty</div>
                        </div>
                    </div>
                    <div class="col-lg-1 col-md-2 col-sm-3 col-xs-4 icondemo-wrap vertical-align" data-name="star_half_empty">
                        <div class="icondemo vertical-align-middle">
                            <i class="icon ml-star_half_empty" aria-hidden="true"></i>
                            <div class="icon-title">star_half_empty</div>
                        </div>
                    </div>
                    <div class="col-lg-1 col-md-2 col-sm-3 col-xs-4 icondemo-wrap vertical-align" data-name="reload">
                        <div class="icondemo vertical-align-middle">
                            <i class="icon ml-reload" aria-hidden="true"></i>
                            <div class="icon-title">reload</div>
                        </div>
                    </div>
                    <div class="col-lg-1 col-md-2 col-sm-3 col-xs-4 icondemo-wrap vertical-align" data-name="heart">
                        <div class="icondemo vertical-align-middle">
                            <i class="icon ml-heart" aria-hidden="true"></i>
                            <div class="icon-title">heart</div>
                        </div>
                    </div>
                    <div class="col-lg-1 col-md-2 col-sm-3 col-xs-4 icondemo-wrap vertical-align" data-name="heart_broken">
                        <div class="icondemo vertical-align-middle">
                            <i class="icon ml-heart_broken" aria-hidden="true"></i>
                            <div class="icon-title">heart_broken</div>
                        </div>
                    </div>
                    <div class="col-lg-1 col-md-2 col-sm-3 col-xs-4 icondemo-wrap vertical-align" data-name="hashtag">
                        <div class="icondemo vertical-align-middle">
                            <i class="icon ml-hashtag" aria-hidden="true"></i>
                            <div class="icon-title">hashtag</div>
                        </div>
                    </div>
                    <div class="col-lg-1 col-md-2 col-sm-3 col-xs-4 icondemo-wrap vertical-align" data-name="reply">
                        <div class="icondemo vertical-align-middle">
                            <i class="icon ml-reply" aria-hidden="true"></i>
                            <div class="icon-title">reply</div>
                        </div>
                    </div>
                    <div class="col-lg-1 col-md-2 col-sm-3 col-xs-4 icondemo-wrap vertical-align" data-name="retweet">
                        <div class="icondemo vertical-align-middle">
                            <i class="icon ml-retweet" aria-hidden="true"></i>
                            <div class="icon-title">retweet</div>
                        </div>
                    </div>
                    <div class="col-lg-1 col-md-2 col-sm-3 col-xs-4 icondemo-wrap vertical-align" data-name="signin">
                        <div class="icondemo vertical-align-middle">
                            <i class="icon ml-signin" aria-hidden="true"></i>
                            <div class="icon-title">signin</div>
                        </div>
                    </div>
                    <div class="col-lg-1 col-md-2 col-sm-3 col-xs-4 icondemo-wrap vertical-align" data-name="signout">
                        <div class="icondemo vertical-align-middle">
                            <i class="icon ml-signout" aria-hidden="true"></i>
                            <div class="icon-title">signout</div>
                        </div>
                    </div>
                    <div class="col-lg-1 col-md-2 col-sm-3 col-xs-4 icondemo-wrap vertical-align" data-name="download">
                        <div class="icondemo vertical-align-middle">
                            <i class="icon ml-download" aria-hidden="true"></i>
                            <div class="icon-title">download</div>
                        </div>
                    </div>
                    <div class="col-lg-1 col-md-2 col-sm-3 col-xs-4 icondemo-wrap vertical-align" data-name="upload">
                        <div class="icondemo vertical-align-middle">
                            <i class="icon ml-upload" aria-hidden="true"></i>
                            <div class="icon-title">upload</div>
                        </div>
                    </div>
                    <div class="col-lg-1 col-md-2 col-sm-3 col-xs-4 icondemo-wrap vertical-align" data-name="placepin">
                        <div class="icondemo vertical-align-middle">
                            <i class="icon ml-placepin" aria-hidden="true"></i>
                            <div class="icon-title">placepin</div>
                        </div>
                    </div>
                    <div class="col-lg-1 col-md-2 col-sm-3 col-xs-4 icondemo-wrap vertical-align" data-name="display_screen">
                        <div class="icondemo vertical-align-middle">
                            <i class="icon ml-display_screen" aria-hidden="true"></i>
                            <div class="icon-title">display_screen</div>
                        </div>
                    </div>
                    <div class="col-lg-1 col-md-2 col-sm-3 col-xs-4 icondemo-wrap vertical-align" data-name="tablet">
                        <div class="icondemo vertical-align-middle">
                            <i class="icon ml-tablet" aria-hidden="true"></i>
                            <div class="icon-title">tablet</div>
                        </div>
                    </div>
                    <div class="col-lg-1 col-md-2 col-sm-3 col-xs-4 icondemo-wrap vertical-align" data-name="smartphone">
                        <div class="icondemo vertical-align-middle">
                            <i class="icon ml-smartphone" aria-hidden="true"></i>
                            <div class="icon-title">smartphone</div>
                        </div>
                    </div>
                    <div class="col-lg-1 col-md-2 col-sm-3 col-xs-4 icondemo-wrap vertical-align" data-name="connected_object">
                        <div class="icondemo vertical-align-middle">
                            <i class="icon ml-connected_object" aria-hidden="true"></i>
                            <div class="icon-title">connected_object</div>
                        </div>
                    </div>
                    <div class="col-lg-1 col-md-2 col-sm-3 col-xs-4 icondemo-wrap vertical-align" data-name="lock">
                        <div class="icondemo vertical-align-middle">
                            <i class="icon ml-lock" aria-hidden="true"></i>
                            <div class="icon-title">lock</div>
                        </div>
                    </div>
                    <div class="col-lg-1 col-md-2 col-sm-3 col-xs-4 icondemo-wrap vertical-align" data-name="unlock">
                        <div class="icondemo vertical-align-middle">
                            <i class="icon ml-unlock" aria-hidden="true"></i>
                            <div class="icon-title">unlock</div>
                        </div>
                    </div>
                    <div class="col-lg-1 col-md-2 col-sm-3 col-xs-4 icondemo-wrap vertical-align" data-name="camera">
                        <div class="icondemo vertical-align-middle">
                            <i class="icon ml-camera" aria-hidden="true"></i>
                            <div class="icon-title">camera</div>
                        </div>
                    </div>
                    <div class="col-lg-1 col-md-2 col-sm-3 col-xs-4 icondemo-wrap vertical-align" data-name="isight">
                        <div class="icondemo vertical-align-middle">
                            <i class="icon ml-isight" aria-hidden="true"></i>
                            <div class="icon-title">isight</div>
                        </div>
                    </div>
                    <div class="col-lg-1 col-md-2 col-sm-3 col-xs-4 icondemo-wrap vertical-align" data-name="video_camera">
                        <div class="icondemo vertical-align-middle">
                            <i class="icon ml-video_camera" aria-hidden="true"></i>
                            <div class="icon-title">video_camera</div>
                        </div>
                    </div>
                    <div class="col-lg-1 col-md-2 col-sm-3 col-xs-4 icondemo-wrap vertical-align" data-name="random">
                        <div class="icondemo vertical-align-middle">
                            <i class="icon ml-random" aria-hidden="true"></i>
                            <div class="icon-title">random</div>
                        </div>
                    </div>
                    <div class="col-lg-1 col-md-2 col-sm-3 col-xs-4 icondemo-wrap vertical-align" data-name="message">
                        <div class="icondemo vertical-align-middle">
                            <i class="icon ml-message" aria-hidden="true"></i>
                            <div class="icon-title">message</div>
                        </div>
                    </div>
                    <div class="col-lg-1 col-md-2 col-sm-3 col-xs-4 icondemo-wrap vertical-align" data-name="discussion">
                        <div class="icondemo vertical-align-middle">
                            <i class="icon ml-discussion" aria-hidden="true"></i>
                            <div class="icon-title">discussion</div>
                        </div>
                    </div>
                    <div class="col-lg-1 col-md-2 col-sm-3 col-xs-4 icondemo-wrap vertical-align" data-name="calendar">
                        <div class="icondemo vertical-align-middle">
                            <i class="icon ml-calendar" aria-hidden="true"></i>
                            <div class="icon-title">calendar</div>
                        </div>
                    </div>
                    <div class="col-lg-1 col-md-2 col-sm-3 col-xs-4 icondemo-wrap vertical-align" data-name="ringbell">
                        <div class="icondemo vertical-align-middle">
                            <i class="icon ml-ringbell" aria-hidden="true"></i>
                            <div class="icon-title">ringbell</div>
                        </div>
                    </div>
                    <div class="col-lg-1 col-md-2 col-sm-3 col-xs-4 icondemo-wrap vertical-align" data-name="movie">
                        <div class="icondemo vertical-align-middle">
                            <i class="icon ml-movie" aria-hidden="true"></i>
                            <div class="icon-title">movie</div>
                        </div>
                    </div>
                    <div class="col-lg-1 col-md-2 col-sm-3 col-xs-4 icondemo-wrap vertical-align" data-name="mail">
                        <div class="icondemo vertical-align-middle">
                            <i class="icon ml-mail" aria-hidden="true"></i>
                            <div class="icon-title">mail</div>
                        </div>
                    </div>
                    <div class="col-lg-1 col-md-2 col-sm-3 col-xs-4 icondemo-wrap vertical-align" data-name="pen">
                        <div class="icondemo vertical-align-middle">
                            <i class="icon ml-pen" aria-hidden="true"></i>
                            <div class="icon-title">pen</div>
                        </div>
                    </div>
                    <div class="col-lg-1 col-md-2 col-sm-3 col-xs-4 icondemo-wrap vertical-align" data-name="settings">
                        <div class="icondemo vertical-align-middle">
                            <i class="icon ml-settings" aria-hidden="true"></i>
                            <div class="icon-title">settings</div>
                        </div>
                    </div>
                    <div class="col-lg-1 col-md-2 col-sm-3 col-xs-4 icondemo-wrap vertical-align" data-name="measure">
                        <div class="icondemo vertical-align-middle">
                            <i class="icon ml-measure" aria-hidden="true"></i>
                            <div class="icon-title">measure</div>
                        </div>
                    </div>
                    <div class="col-lg-1 col-md-2 col-sm-3 col-xs-4 icondemo-wrap vertical-align" data-name="vector">
                        <div class="icondemo vertical-align-middle">
                            <i class="icon ml-vector" aria-hidden="true"></i>
                            <div class="icon-title">vector</div>
                        </div>
                    </div>
                    <div class="col-lg-1 col-md-2 col-sm-3 col-xs-4 icondemo-wrap vertical-align" data-name="vector_pen">
                        <div class="icondemo vertical-align-middle">
                            <i class="icon ml-vector_pen" aria-hidden="true"></i>
                            <div class="icon-title">vector_pen</div>
                        </div>
                    </div>
                    <div class="col-lg-1 col-md-2 col-sm-3 col-xs-4 icondemo-wrap vertical-align" data-name="mute_on">
                        <div class="icondemo vertical-align-middle">
                            <i class="icon ml-mute_on" aria-hidden="true"></i>
                            <div class="icon-title">mute_on</div>
                        </div>
                    </div>
                    <div class="col-lg-1 col-md-2 col-sm-3 col-xs-4 icondemo-wrap vertical-align" data-name="mute_off">
                        <div class="icondemo vertical-align-middle">
                            <i class="icon ml-mute_off" aria-hidden="true"></i>
                            <div class="icon-title">mute_off</div>
                        </div>
                    </div>
                    <div class="col-lg-1 col-md-2 col-sm-3 col-xs-4 icondemo-wrap vertical-align" data-name="home">
                        <div class="icondemo vertical-align-middle">
                            <i class="icon ml-home" aria-hidden="true"></i>
                            <div class="icon-title">home</div>
                        </div>
                    </div>
                    <div class="col-lg-1 col-md-2 col-sm-3 col-xs-4 icondemo-wrap vertical-align" data-name="sheet">
                        <div class="icondemo vertical-align-middle">
                            <i class="icon ml-sheet" aria-hidden="true"></i>
                            <div class="icon-title">sheet</div>
                        </div>
                    </div>
                    <div class="col-lg-1 col-md-2 col-sm-3 col-xs-4 icondemo-wrap vertical-align" data-name="arrow_big_right">
                        <div class="icondemo vertical-align-middle">
                            <i class="icon ml-arrow_big_right" aria-hidden="true"></i>
                            <div class="icon-title">arrow_big_right</div>
                        </div>
                    </div>
                    <div class="col-lg-1 col-md-2 col-sm-3 col-xs-4 icondemo-wrap vertical-align" data-name="arrow_big_left">
                        <div class="icondemo vertical-align-middle">
                            <i class="icon ml-arrow_big_left" aria-hidden="true"></i>
                            <div class="icon-title">arrow_big_left</div>
                        </div>
                    </div>
                    <div class="col-lg-1 col-md-2 col-sm-3 col-xs-4 icondemo-wrap vertical-align" data-name="arrow_big_down">
                        <div class="icondemo vertical-align-middle">
                            <i class="icon ml-arrow_big_down" aria-hidden="true"></i>
                            <div class="icon-title">arrow_big_down</div>
                        </div>
                    </div>
                    <div class="col-lg-1 col-md-2 col-sm-3 col-xs-4 icondemo-wrap vertical-align" data-name="arrow_big_up">
                        <div class="icondemo vertical-align-middle">
                            <i class="icon ml-arrow_big_up" aria-hidden="true"></i>
                            <div class="icon-title">arrow_big_up</div>
                        </div>
                    </div>
                    <div class="col-lg-1 col-md-2 col-sm-3 col-xs-4 icondemo-wrap vertical-align" data-name="dribbble_circle">
                        <div class="icondemo vertical-align-middle">
                            <i class="icon ml-dribbble_circle" aria-hidden="true"></i>
                            <div class="icon-title">dribbble_circle</div>
                        </div>
                    </div>
                    <div class="col-lg-1 col-md-2 col-sm-3 col-xs-4 icondemo-wrap vertical-align" data-name="dribbble">
                        <div class="icondemo vertical-align-middle">
                            <i class="icon ml-dribbble" aria-hidden="true"></i>
                            <div class="icon-title">dribbble</div>
                        </div>
                    </div>
                    <div class="col-lg-1 col-md-2 col-sm-3 col-xs-4 icondemo-wrap vertical-align" data-name="facebook_circle">
                        <div class="icondemo vertical-align-middle">
                            <i class="icon ml-facebook_circle" aria-hidden="true"></i>
                            <div class="icon-title">facebook_circle</div>
                        </div>
                    </div>
                    <div class="col-lg-1 col-md-2 col-sm-3 col-xs-4 icondemo-wrap vertical-align" data-name="facebook">
                        <div class="icondemo vertical-align-middle">
                            <i class="icon ml-facebook" aria-hidden="true"></i>
                            <div class="icon-title">facebook</div>
                        </div>
                    </div>
                    <div class="col-lg-1 col-md-2 col-sm-3 col-xs-4 icondemo-wrap vertical-align" data-name="git_circle_alt">
                        <div class="icondemo vertical-align-middle">
                            <i class="icon ml-git_circle_alt" aria-hidden="true"></i>
                            <div class="icon-title">git_circle_alt</div>
                        </div>
                    </div>
                    <div class="col-lg-1 col-md-2 col-sm-3 col-xs-4 icondemo-wrap vertical-align" data-name="git_circle">
                        <div class="icondemo vertical-align-middle">
                            <i class="icon ml-git_circle" aria-hidden="true"></i>
                            <div class="icon-title">git_circle</div>
                        </div>
                    </div>
                    <div class="col-lg-1 col-md-2 col-sm-3 col-xs-4 icondemo-wrap vertical-align" data-name="git">
                        <div class="icondemo vertical-align-middle">
                            <i class="icon ml-git" aria-hidden="true"></i>
                            <div class="icon-title">git</div>
                        </div>
                    </div>
                    <div class="col-lg-1 col-md-2 col-sm-3 col-xs-4 icondemo-wrap vertical-align" data-name="octopus">
                        <div class="icondemo vertical-align-middle">
                            <i class="icon ml-octopus" aria-hidden="true"></i>
                            <div class="icon-title">octopus</div>
                        </div>
                    </div>
                    <div class="col-lg-1 col-md-2 col-sm-3 col-xs-4 icondemo-wrap vertical-align" data-name="twitter_circle">
                        <div class="icondemo vertical-align-middle">
                            <i class="icon ml-twitter_circle" aria-hidden="true"></i>
                            <div class="icon-title">twitter_circle</div>
                        </div>
                    </div>
                    <div class="col-lg-1 col-md-2 col-sm-3 col-xs-4 icondemo-wrap vertical-align" data-name="twitter">
                        <div class="icondemo vertical-align-middle">
                            <i class="icon ml-twitter" aria-hidden="true"></i>
                            <div class="icon-title">twitter</div>
                        </div>
                    </div>
                    <div class="col-lg-1 col-md-2 col-sm-3 col-xs-4 icondemo-wrap vertical-align" data-name="google_plus_circle">
                        <div class="icondemo vertical-align-middle">
                            <i class="icon ml-google_plus_circle" aria-hidden="true"></i>
                            <div class="icon-title">google_plus_circle</div>
                        </div>
                    </div>
                    <div class="col-lg-1 col-md-2 col-sm-3 col-xs-4 icondemo-wrap vertical-align" data-name="google_plus">
                        <div class="icondemo vertical-align-middle">
                            <i class="icon ml-google_plus" aria-hidden="true"></i>
                            <div class="icon-title">google_plus</div>
                        </div>
                    </div>
                    <div class="col-lg-1 col-md-2 col-sm-3 col-xs-4 icondemo-wrap vertical-align" data-name="linked_in_circle">
                        <div class="icondemo vertical-align-middle">
                            <i class="icon ml-linked_in_circle" aria-hidden="true"></i>
                            <div class="icon-title">linked_in_circle</div>
                        </div>
                    </div>
                    <div class="col-lg-1 col-md-2 col-sm-3 col-xs-4 icondemo-wrap vertical-align" data-name="linked_in">
                        <div class="icondemo vertical-align-middle">
                            <i class="icon ml-linked_in" aria-hidden="true"></i>
                            <div class="icon-title">linked_in</div>
                        </div>
                    </div>
                    <div class="col-lg-1 col-md-2 col-sm-3 col-xs-4 icondemo-wrap vertical-align" data-name="instagram">
                        <div class="icondemo vertical-align-middle">
                            <i class="icon ml-instagram" aria-hidden="true"></i>
                            <div class="icon-title">instagram</div>
                        </div>
                    </div>
                    <div class="col-lg-1 col-md-2 col-sm-3 col-xs-4 icondemo-wrap vertical-align" data-name="instagram_circle">
                        <div class="icondemo vertical-align-middle">
                            <i class="icon ml-instagram_circle" aria-hidden="true"></i>
                            <div class="icon-title">instagram_circle</div>
                        </div>
                    </div>
                    <div class="col-lg-1 col-md-2 col-sm-3 col-xs-4 icondemo-wrap vertical-align" data-name="mfg_icon">
                        <div class="icondemo vertical-align-middle">
                            <i class="icon ml-mfg_icon" aria-hidden="true"></i>
                            <div class="icon-title">mfg_icon</div>
                        </div>
                    </div>
                    <div class="col-lg-1 col-md-2 col-sm-3 col-xs-4 icondemo-wrap vertical-align" data-name="xing">
                        <div class="icondemo vertical-align-middle">
                            <i class="icon ml-xing" aria-hidden="true"></i>
                            <div class="icon-title">xing</div>
                        </div>
                    </div>
                    <div class="col-lg-1 col-md-2 col-sm-3 col-xs-4 icondemo-wrap vertical-align" data-name="xing_circle">
                        <div class="icondemo vertical-align-middle">
                            <i class="icon ml-xing_circle" aria-hidden="true"></i>
                            <div class="icon-title">xing_circle</div>
                        </div>
                    </div>
                    <div class="col-lg-1 col-md-2 col-sm-3 col-xs-4 icondemo-wrap vertical-align" data-name="mfg_icon_circle">
                        <div class="icondemo vertical-align-middle">
                            <i class="icon ml-mfg_icon_circle" aria-hidden="true"></i>
                            <div class="icon-title">mfg_icon_circle</div>
                        </div>
                    </div>
                    <div class="col-lg-1 col-md-2 col-sm-3 col-xs-4 icondemo-wrap vertical-align" data-name="user">
                        <div class="icondemo vertical-align-middle">
                            <i class="icon ml-user" aria-hidden="true"></i>
                            <div class="icon-title">user</div>
                        </div>
                    </div>
                    <div class="col-lg-1 col-md-2 col-sm-3 col-xs-4 icondemo-wrap vertical-align" data-name="user_male">
                        <div class="icondemo vertical-align-middle">
                            <i class="icon ml-user_male" aria-hidden="true"></i>
                            <div class="icon-title">user_male</div>
                        </div>
                    </div>
                    <div class="col-lg-1 col-md-2 col-sm-3 col-xs-4 icondemo-wrap vertical-align" data-name="user_female">
                        <div class="icondemo vertical-align-middle">
                            <i class="icon ml-user_female" aria-hidden="true"></i>
                            <div class="icon-title">user_female</div>
                        </div>
                    </div>
                    <div class="col-lg-1 col-md-2 col-sm-3 col-xs-4 icondemo-wrap vertical-align" data-name="users">
                        <div class="icondemo vertical-align-middle">
                            <i class="icon ml-users" aria-hidden="true"></i>
                            <div class="icon-title">users</div>
                        </div>
                    </div>
                    <div class="col-lg-1 col-md-2 col-sm-3 col-xs-4 icondemo-wrap vertical-align" data-name="file_open">
                        <div class="icondemo vertical-align-middle">
                            <i class="icon ml-file_open" aria-hidden="true"></i>
                            <div class="icon-title">file_open</div>
                        </div>
                    </div>
                    <div class="col-lg-1 col-md-2 col-sm-3 col-xs-4 icondemo-wrap vertical-align" data-name="file_close">
                        <div class="icondemo vertical-align-middle">
                            <i class="icon ml-file_close" aria-hidden="true"></i>
                            <div class="icon-title">file_close</div>
                        </div>
                    </div>
                    <div class="col-lg-1 col-md-2 col-sm-3 col-xs-4 icondemo-wrap vertical-align" data-name="file_alt">
                        <div class="icondemo vertical-align-middle">
                            <i class="icon ml-file_alt" aria-hidden="true"></i>
                            <div class="icon-title">file_alt</div>
                        </div>
                    </div>
                    <div class="col-lg-1 col-md-2 col-sm-3 col-xs-4 icondemo-wrap vertical-align" data-name="file_close_alt">
                        <div class="icondemo vertical-align-middle">
                            <i class="icon ml-file_close_alt" aria-hidden="true"></i>
                            <div class="icon-title">file_close_alt</div>
                        </div>
                    </div>
                    <div class="col-lg-1 col-md-2 col-sm-3 col-xs-4 icondemo-wrap vertical-align" data-name="attachment">
                        <div class="icondemo vertical-align-middle">
                            <i class="icon ml-attachment" aria-hidden="true"></i>
                            <div class="icon-title">attachment</div>
                        </div>
                    </div>
                    <div class="col-lg-1 col-md-2 col-sm-3 col-xs-4 icondemo-wrap vertical-align" data-name="check">
                        <div class="icondemo vertical-align-middle">
                            <i class="icon ml-check" aria-hidden="true"></i>
                            <div class="icon-title">check</div>
                        </div>
                    </div>
                    <div class="col-lg-1 col-md-2 col-sm-3 col-xs-4 icondemo-wrap vertical-align" data-name="cross_mark">
                        <div class="icondemo vertical-align-middle">
                            <i class="icon ml-cross_mark" aria-hidden="true"></i>
                            <div class="icon-title">cross_mark</div>
                        </div>
                    </div>
                    <div class="col-lg-1 col-md-2 col-sm-3 col-xs-4 icondemo-wrap vertical-align" data-name="cancel_circle">
                        <div class="icondemo vertical-align-middle">
                            <i class="icon ml-cancel_circle" aria-hidden="true"></i>
                            <div class="icon-title">cancel_circle</div>
                        </div>
                    </div>
                    <div class="col-lg-1 col-md-2 col-sm-3 col-xs-4 icondemo-wrap vertical-align" data-name="check_circle">
                        <div class="icondemo vertical-align-middle">
                            <i class="icon ml-check_circle" aria-hidden="true"></i>
                            <div class="icon-title">check_circle</div>
                        </div>
                    </div>
                    <div class="col-lg-1 col-md-2 col-sm-3 col-xs-4 icondemo-wrap vertical-align" data-name="magnifying">
                        <div class="icondemo vertical-align-middle">
                            <i class="icon ml-magnifying" aria-hidden="true"></i>
                            <div class="icon-title">magnifying</div>
                        </div>
                    </div>
                    <div class="col-lg-1 col-md-2 col-sm-3 col-xs-4 icondemo-wrap vertical-align" data-name="inbox">
                        <div class="icondemo vertical-align-middle">
                            <i class="icon ml-inbox" aria-hidden="true"></i>
                            <div class="icon-title">inbox</div>
                        </div>
                    </div>
                    <div class="col-lg-1 col-md-2 col-sm-3 col-xs-4 icondemo-wrap vertical-align" data-name="clock">
                        <div class="icondemo vertical-align-middle">
                            <i class="icon ml-clock" aria-hidden="true"></i>
                            <div class="icon-title">clock</div>
                        </div>
                    </div>
                    <div class="col-lg-1 col-md-2 col-sm-3 col-xs-4 icondemo-wrap vertical-align" data-name="stopwatch">
                        <div class="icondemo vertical-align-middle">
                            <i class="icon ml-stopwatch" aria-hidden="true"></i>
                            <div class="icon-title">stopwatch</div>
                        </div>
                    </div>
                    <div class="col-lg-1 col-md-2 col-sm-3 col-xs-4 icondemo-wrap vertical-align" data-name="hourglass">
                        <div class="icondemo vertical-align-middle">
                            <i class="icon ml-hourglass" aria-hidden="true"></i>
                            <div class="icon-title">hourglass</div>
                        </div>
                    </div>
                    <div class="col-lg-1 col-md-2 col-sm-3 col-xs-4 icondemo-wrap vertical-align" data-name="trophy">
                        <div class="icondemo vertical-align-middle">
                            <i class="icon ml-trophy" aria-hidden="true"></i>
                            <div class="icon-title">trophy</div>
                        </div>
                    </div>
                    <div class="col-lg-1 col-md-2 col-sm-3 col-xs-4 icondemo-wrap vertical-align" data-name="unlock_alt">
                        <div class="icondemo vertical-align-middle">
                            <i class="icon ml-unlock_alt" aria-hidden="true"></i>
                            <div class="icon-title">unlock_alt</div>
                        </div>
                    </div>
                    <div class="col-lg-1 col-md-2 col-sm-3 col-xs-4 icondemo-wrap vertical-align" data-name="lock_alt">
                        <div class="icondemo vertical-align-middle">
                            <i class="icon ml-lock_alt" aria-hidden="true"></i>
                            <div class="icon-title">lock_alt</div>
                        </div>
                    </div>
                    <div class="col-lg-1 col-md-2 col-sm-3 col-xs-4 icondemo-wrap vertical-align" data-name="arrow_doubled_right">
                        <div class="icondemo vertical-align-middle">
                            <i class="icon ml-arrow_doubled_right" aria-hidden="true"></i>
                            <div class="icon-title">arrow_doubled_right</div>
                        </div>
                    </div>
                    <div class="col-lg-1 col-md-2 col-sm-3 col-xs-4 icondemo-wrap vertical-align" data-name="arrow_doubled_left">
                        <div class="icondemo vertical-align-middle">
                            <i class="icon ml-arrow_doubled_left" aria-hidden="true"></i>
                            <div class="icon-title">arrow_doubled_left</div>
                        </div>
                    </div>
                    <div class="col-lg-1 col-md-2 col-sm-3 col-xs-4 icondemo-wrap vertical-align" data-name="arrow_doubled_down">
                        <div class="icondemo vertical-align-middle">
                            <i class="icon ml-arrow_doubled_down" aria-hidden="true"></i>
                            <div class="icon-title">arrow_doubled_down</div>
                        </div>
                    </div>
                    <div class="col-lg-1 col-md-2 col-sm-3 col-xs-4 icondemo-wrap vertical-align" data-name="arrow_doubled_up">
                        <div class="icondemo vertical-align-middle">
                            <i class="icon ml-arrow_doubled_up" aria-hidden="true"></i>
                            <div class="icon-title">arrow_doubled_up</div>
                        </div>
                    </div>
                    <div class="col-lg-1 col-md-2 col-sm-3 col-xs-4 icondemo-wrap vertical-align" data-name="link">
                        <div class="icondemo vertical-align-middle">
                            <i class="icon ml-link" aria-hidden="true"></i>
                            <div class="icon-title">link</div>
                        </div>
                    </div>
                    <div class="col-lg-1 col-md-2 col-sm-3 col-xs-4 icondemo-wrap vertical-align" data-name="warning">
                        <div class="icondemo vertical-align-middle">
                            <i class="icon ml-warning" aria-hidden="true"></i>
                            <div class="icon-title">warning</div>
                        </div>
                    </div>
                    <div class="col-lg-1 col-md-2 col-sm-3 col-xs-4 icondemo-wrap vertical-align" data-name="warning_alt">
                        <div class="icondemo vertical-align-middle">
                            <i class="icon ml-warning_alt" aria-hidden="true"></i>
                            <div class="icon-title">warning_alt</div>
                        </div>
                    </div>
                    <div class="col-lg-1 col-md-2 col-sm-3 col-xs-4 icondemo-wrap vertical-align" data-name="magnifying_plus">
                        <div class="icondemo vertical-align-middle">
                            <i class="icon ml-magnifying_plus" aria-hidden="true"></i>
                            <div class="icon-title">magnifying_plus</div>
                        </div>
                    </div>
                    <div class="col-lg-1 col-md-2 col-sm-3 col-xs-4 icondemo-wrap vertical-align" data-name="magnifying_minus">
                        <div class="icondemo vertical-align-middle">
                            <i class="icon ml-magnifying_minus" aria-hidden="true"></i>
                            <div class="icon-title">magnifying_minus</div>
                        </div>
                    </div>
                    <div class="col-lg-1 col-md-2 col-sm-3 col-xs-4 icondemo-wrap vertical-align" data-name="white_question">
                        <div class="icondemo vertical-align-middle">
                            <i class="icon ml-white_question" aria-hidden="true"></i>
                            <div class="icon-title">white_question</div>
                        </div>
                    </div>
                    <div class="col-lg-1 col-md-2 col-sm-3 col-xs-4 icondemo-wrap vertical-align" data-name="black_question">
                        <div class="icondemo vertical-align-middle">
                            <i class="icon ml-black_question" aria-hidden="true"></i>
                            <div class="icon-title">black_question</div>
                        </div>
                    </div>
                    <div class="col-lg-1 col-md-2 col-sm-3 col-xs-4 icondemo-wrap vertical-align" data-name="stop">
                        <div class="icondemo vertical-align-middle">
                            <i class="icon ml-stop" aria-hidden="true"></i>
                            <div class="icon-title">stop</div>
                        </div>
                    </div>
                    <div class="col-lg-1 col-md-2 col-sm-3 col-xs-4 icondemo-wrap vertical-align" data-name="share">
                        <div class="icondemo vertical-align-middle">
                            <i class="icon ml-share" aria-hidden="true"></i>
                            <div class="icon-title">share</div>
                        </div>
                    </div>
                    <div class="col-lg-1 col-md-2 col-sm-3 col-xs-4 icondemo-wrap vertical-align" data-name="eye">
                        <div class="icondemo vertical-align-middle">
                            <i class="icon ml-eye" aria-hidden="true"></i>
                            <div class="icon-title">eye</div>
                        </div>
                    </div>
                    <div class="col-lg-1 col-md-2 col-sm-3 col-xs-4 icondemo-wrap vertical-align" data-name="trash_can">
                        <div class="icondemo vertical-align-middle">
                            <i class="icon ml-trash_can" aria-hidden="true"></i>
                            <div class="icon-title">trash_can</div>
                        </div>
                    </div>
                    <div class="col-lg-1 col-md-2 col-sm-3 col-xs-4 icondemo-wrap vertical-align" data-name="hard_drive">
                        <div class="icondemo vertical-align-middle">
                            <i class="icon ml-hard_drive" aria-hidden="true"></i>
                            <div class="icon-title">hard_drive</div>
                        </div>
                    </div>
                    <div class="col-lg-1 col-md-2 col-sm-3 col-xs-4 icondemo-wrap vertical-align" data-name="information_black">
                        <div class="icondemo vertical-align-middle">
                            <i class="icon ml-information_black" aria-hidden="true"></i>
                            <div class="icon-title">information_black</div>
                        </div>
                    </div>
                    <div class="col-lg-1 col-md-2 col-sm-3 col-xs-4 icondemo-wrap vertical-align" data-name="information_white">
                        <div class="icondemo vertical-align-middle">
                            <i class="icon ml-information_white" aria-hidden="true"></i>
                            <div class="icon-title">information_white</div>
                        </div>
                    </div>
                    <div class="col-lg-1 col-md-2 col-sm-3 col-xs-4 icondemo-wrap vertical-align" data-name="printer">
                        <div class="icondemo vertical-align-middle">
                            <i class="icon ml-printer" aria-hidden="true"></i>
                            <div class="icon-title">printer</div>
                        </div>
                    </div>
                    <div class="col-lg-1 col-md-2 col-sm-3 col-xs-4 icondemo-wrap vertical-align" data-name="letter">
                        <div class="icondemo vertical-align-middle">
                            <i class="icon ml-letter" aria-hidden="true"></i>
                            <div class="icon-title">letter</div>
                        </div>
                    </div>
                    <div class="col-lg-1 col-md-2 col-sm-3 col-xs-4 icondemo-wrap vertical-align" data-name="soundcloud">
                        <div class="icondemo vertical-align-middle">
                            <i class="icon ml-soundcloud" aria-hidden="true"></i>
                            <div class="icon-title">soundcloud</div>
                        </div>
                    </div>
                    <div class="col-lg-1 col-md-2 col-sm-3 col-xs-4 icondemo-wrap vertical-align" data-name="soundcloud_circle">
                        <div class="icondemo vertical-align-middle">
                            <i class="icon ml-soundcloud_circle" aria-hidden="true"></i>
                            <div class="icon-title">soundcloud_circle</div>
                        </div>
                    </div>
                    <div class="col-lg-1 col-md-2 col-sm-3 col-xs-4 icondemo-wrap vertical-align" data-name="anchor">
                        <div class="icondemo vertical-align-middle">
                            <i class="icon ml-anchor" aria-hidden="true"></i>
                            <div class="icon-title">anchor</div>
                        </div>
                    </div>
                    <div class="col-lg-1 col-md-2 col-sm-3 col-xs-4 icondemo-wrap vertical-align" data-name="female_sign">
                        <div class="icondemo vertical-align-middle">
                            <i class="icon ml-female_sign" aria-hidden="true"></i>
                            <div class="icon-title">female_sign</div>
                        </div>
                    </div>
                    <div class="col-lg-1 col-md-2 col-sm-3 col-xs-4 icondemo-wrap vertical-align" data-name="male_sign">
                        <div class="icondemo vertical-align-middle">
                            <i class="icon ml-male_sign" aria-hidden="true"></i>
                            <div class="icon-title">male_sign</div>
                        </div>
                    </div>
                    <div class="col-lg-1 col-md-2 col-sm-3 col-xs-4 icondemo-wrap vertical-align" data-name="joystick">
                        <div class="icondemo vertical-align-middle">
                            <i class="icon ml-joystick" aria-hidden="true"></i>
                            <div class="icon-title">joystick</div>
                        </div>
                    </div>
                    <div class="col-lg-1 col-md-2 col-sm-3 col-xs-4 icondemo-wrap vertical-align" data-name="high_voltage">
                        <div class="icondemo vertical-align-middle">
                            <i class="icon ml-high_voltage" aria-hidden="true"></i>
                            <div class="icon-title">high_voltage</div>
                        </div>
                    </div>
                    <div class="col-lg-1 col-md-2 col-sm-3 col-xs-4 icondemo-wrap vertical-align" data-name="fire">
                        <div class="icondemo vertical-align-middle">
                            <i class="icon ml-fire" aria-hidden="true"></i>
                            <div class="icon-title">fire</div>
                        </div>
                    </div>
                    <div class="col-lg-1 col-md-2 col-sm-3 col-xs-4 icondemo-wrap vertical-align" data-name="newspaper">
                        <div class="icondemo vertical-align-middle">
                            <i class="icon ml-newspaper" aria-hidden="true"></i>
                            <div class="icon-title">newspaper</div>
                        </div>
                    </div>
                    <div class="col-lg-1 col-md-2 col-sm-3 col-xs-4 icondemo-wrap vertical-align" data-name="chart">
                        <div class="icondemo vertical-align-middle">
                            <i class="icon ml-chart" aria-hidden="true"></i>
                            <div class="icon-title">chart</div>
                        </div>
                    </div>
                    <div class="col-lg-1 col-md-2 col-sm-3 col-xs-4 icondemo-wrap vertical-align" data-name="spread">
                        <div class="icondemo vertical-align-middle">
                            <i class="icon ml-spread" aria-hidden="true"></i>
                            <div class="icon-title">spread</div>
                        </div>
                    </div>
                    <div class="col-lg-1 col-md-2 col-sm-3 col-xs-4 icondemo-wrap vertical-align" data-name="spinner_1">
                        <div class="icondemo vertical-align-middle">
                            <i class="icon ml-spinner_1" aria-hidden="true"></i>
                            <div class="icon-title">spinner_1</div>
                        </div>
                    </div>
                    <div class="col-lg-1 col-md-2 col-sm-3 col-xs-4 icondemo-wrap vertical-align" data-name="spinner_2">
                        <div class="icondemo vertical-align-middle">
                            <i class="icon ml-spinner_2" aria-hidden="true"></i>
                            <div class="icon-title">spinner_2</div>
                        </div>
                    </div>
                    <div class="col-lg-1 col-md-2 col-sm-3 col-xs-4 icondemo-wrap vertical-align" data-name="chart_alt">
                        <div class="icondemo vertical-align-middle">
                            <i class="icon ml-chart_alt" aria-hidden="true"></i>
                            <div class="icon-title">chart_alt</div>
                        </div>
                    </div>
                    <div class="col-lg-1 col-md-2 col-sm-3 col-xs-4 icondemo-wrap vertical-align" data-name="label">
                        <div class="icondemo vertical-align-middle">
                            <i class="icon ml-label" aria-hidden="true"></i>
                            <div class="icon-title">label</div>
                        </div>
                    </div>
                    <div class="col-lg-1 col-md-2 col-sm-3 col-xs-4 icondemo-wrap vertical-align" data-name="brush">
                        <div class="icondemo vertical-align-middle">
                            <i class="icon ml-brush" aria-hidden="true"></i>
                            <div class="icon-title">brush</div>
                        </div>
                    </div>
                    <div class="col-lg-1 col-md-2 col-sm-3 col-xs-4 icondemo-wrap vertical-align" data-name="refresh">
                        <div class="icondemo vertical-align-middle">
                            <i class="icon ml-refresh" aria-hidden="true"></i>
                            <div class="icon-title">refresh</div>
                        </div>
                    </div>
                    <div class="col-lg-1 col-md-2 col-sm-3 col-xs-4 icondemo-wrap vertical-align" data-name="node">
                        <div class="icondemo vertical-align-middle">
                            <i class="icon ml-node" aria-hidden="true"></i>
                            <div class="icon-title">node</div>
                        </div>
                    </div>
                    <div class="col-lg-1 col-md-2 col-sm-3 col-xs-4 icondemo-wrap vertical-align" data-name="node_2">
                        <div class="icondemo vertical-align-middle">
                            <i class="icon ml-node_2" aria-hidden="true"></i>
                            <div class="icon-title">node_2</div>
                        </div>
                    </div>
                    <div class="col-lg-1 col-md-2 col-sm-3 col-xs-4 icondemo-wrap vertical-align" data-name="node_3">
                        <div class="icondemo vertical-align-middle">
                            <i class="icon ml-node_3" aria-hidden="true"></i>
                            <div class="icon-title">node_3</div>
                        </div>
                    </div>
                    <div class="col-lg-1 col-md-2 col-sm-3 col-xs-4 icondemo-wrap vertical-align" data-name="link_2_nodes">
                        <div class="icondemo vertical-align-middle">
                            <i class="icon ml-link_2_nodes" aria-hidden="true"></i>
                            <div class="icon-title">link_2_nodes</div>
                        </div>
                    </div>
                    <div class="col-lg-1 col-md-2 col-sm-3 col-xs-4 icondemo-wrap vertical-align" data-name="link_3_nodes">
                        <div class="icondemo vertical-align-middle">
                            <i class="icon ml-link_3_nodes" aria-hidden="true"></i>
                            <div class="icon-title">link_3_nodes</div>
                        </div>
                    </div>
                    <div class="col-lg-1 col-md-2 col-sm-3 col-xs-4 icondemo-wrap vertical-align" data-name="link_loop_nodes">
                        <div class="icondemo vertical-align-middle">
                            <i class="icon ml-link_loop_nodes" aria-hidden="true"></i>
                            <div class="icon-title">link_loop_nodes</div>
                        </div>
                    </div>
                    <div class="col-lg-1 col-md-2 col-sm-3 col-xs-4 icondemo-wrap vertical-align" data-name="node_size">
                        <div class="icondemo vertical-align-middle">
                            <i class="icon ml-node_size" aria-hidden="true"></i>
                            <div class="icon-title">node_size</div>
                        </div>
                    </div>
                    <div class="col-lg-1 col-md-2 col-sm-3 col-xs-4 icondemo-wrap vertical-align" data-name="node_color">
                        <div class="icondemo vertical-align-middle">
                            <i class="icon ml-node_color" aria-hidden="true"></i>
                            <div class="icon-title">node_color</div>
                        </div>
                    </div>
                    <div class="col-lg-1 col-md-2 col-sm-3 col-xs-4 icondemo-wrap vertical-align" data-name="layout_directed">
                        <div class="icondemo vertical-align-middle">
                            <i class="icon ml-layout_directed" aria-hidden="true"></i>
                            <div class="icon-title">layout_directed</div>
                        </div>
                    </div>
                    <div class="col-lg-1 col-md-2 col-sm-3 col-xs-4 icondemo-wrap vertical-align" data-name="layout_radial">
                        <div class="icondemo vertical-align-middle">
                            <i class="icon ml-layout_radial" aria-hidden="true"></i>
                            <div class="icon-title">layout_radial</div>
                        </div>
                    </div>
                    <div class="col-lg-1 col-md-2 col-sm-3 col-xs-4 icondemo-wrap vertical-align" data-name="layout_hierarchical">
                        <div class="icondemo vertical-align-middle">
                            <i class="icon ml-layout_hierarchical" aria-hidden="true"></i>
                            <div class="icon-title">layout_hierarchical</div>
                        </div>
                    </div>
                    <div class="col-lg-1 col-md-2 col-sm-3 col-xs-4 icondemo-wrap vertical-align" data-name="node_link_direction">
                        <div class="icondemo vertical-align-middle">
                            <i class="icon ml-node_link_direction" aria-hidden="true"></i>
                            <div class="icon-title">node_link_direction</div>
                        </div>
                    </div>
                    <div class="col-lg-1 col-md-2 col-sm-3 col-xs-4 icondemo-wrap vertical-align" data-name="node_link_short_path">
                        <div class="icondemo vertical-align-middle">
                            <i class="icon ml-node_link_short_path" aria-hidden="true"></i>
                            <div class="icon-title">node_link_short_path</div>
                        </div>
                    </div>
                    <div class="col-lg-1 col-md-2 col-sm-3 col-xs-4 icondemo-wrap vertical-align" data-name="node_cluster">
                        <div class="icondemo vertical-align-middle">
                            <i class="icon ml-node_cluster" aria-hidden="true"></i>
                            <div class="icon-title">node_cluster</div>
                        </div>
                    </div>
                    <div class="col-lg-1 col-md-2 col-sm-3 col-xs-4 icondemo-wrap vertical-align" data-name="display_graph">
                        <div class="icondemo vertical-align-middle">
                            <i class="icon ml-display_graph" aria-hidden="true"></i>
                            <div class="icon-title">display_graph</div>
                        </div>
                    </div>
                    <div class="col-lg-1 col-md-2 col-sm-3 col-xs-4 icondemo-wrap vertical-align" data-name="node_link_weight">
                        <div class="icondemo vertical-align-middle">
                            <i class="icon ml-node_link_weight" aria-hidden="true"></i>
                            <div class="icon-title">node_link_weight</div>
                        </div>
                    </div>
                    <div class="col-lg-1 col-md-2 col-sm-3 col-xs-4 icondemo-wrap vertical-align" data-name="more_node_links">
                        <div class="icondemo vertical-align-middle">
                            <i class="icon ml-more_node_links" aria-hidden="true"></i>
                            <div class="icon-title">more_node_links</div>
                        </div>
                    </div>
                    <div class="col-lg-1 col-md-2 col-sm-3 col-xs-4 icondemo-wrap vertical-align" data-name="node_shape">
                        <div class="icondemo vertical-align-middle">
                            <i class="icon ml-node_shape" aria-hidden="true"></i>
                            <div class="icon-title">node_shape</div>
                        </div>
                    </div>
                    <div class="col-lg-1 col-md-2 col-sm-3 col-xs-4 icondemo-wrap vertical-align" data-name="node_icon">
                        <div class="icondemo vertical-align-middle">
                            <i class="icon ml-node_icon" aria-hidden="true"></i>
                            <div class="icon-title">node_icon</div>
                        </div>
                    </div>
                    <div class="col-lg-1 col-md-2 col-sm-3 col-xs-4 icondemo-wrap vertical-align" data-name="node_text">
                        <div class="icondemo vertical-align-middle">
                            <i class="icon ml-node_text" aria-hidden="true"></i>
                            <div class="icon-title">node_text</div>
                        </div>
                    </div>
                    <div class="col-lg-1 col-md-2 col-sm-3 col-xs-4 icondemo-wrap vertical-align" data-name="node_link_text">
                        <div class="icondemo vertical-align-middle">
                            <i class="icon ml-node_link_text" aria-hidden="true"></i>
                            <div class="icon-title">node_link_text</div>
                        </div>
                    </div>
                    <div class="col-lg-1 col-md-2 col-sm-3 col-xs-4 icondemo-wrap vertical-align" data-name="node_link_color">
                        <div class="icondemo vertical-align-middle">
                            <i class="icon ml-node_link_color" aria-hidden="true"></i>
                            <div class="icon-title">node_link_color</div>
                        </div>
                    </div>
                    <div class="col-lg-1 col-md-2 col-sm-3 col-xs-4 icondemo-wrap vertical-align" data-name="node_link_shape">
                        <div class="icondemo vertical-align-middle">
                            <i class="icon ml-node_link_shape" aria-hidden="true"></i>
                            <div class="icon-title">node_link_shape</div>
                        </div>
                    </div>
                    <div class="col-lg-1 col-md-2 col-sm-3 col-xs-4 icondemo-wrap vertical-align" data-name="credit_card">
                        <div class="icondemo vertical-align-middle">
                            <i class="icon ml-credit_card" aria-hidden="true"></i>
                            <div class="icon-title">credit_card</div>
                        </div>
                    </div>
                    <div class="col-lg-1 col-md-2 col-sm-3 col-xs-4 icondemo-wrap vertical-align" data-name="disconnect">
                        <div class="icondemo vertical-align-middle">
                            <i class="icon ml-disconnect" aria-hidden="true"></i>
                            <div class="icon-title">disconnect</div>
                        </div>
                    </div>
                    <div class="col-lg-1 col-md-2 col-sm-3 col-xs-4 icondemo-wrap vertical-align" data-name="graph">
                        <div class="icondemo vertical-align-middle">
                            <i class="icon ml-graph" aria-hidden="true"></i>
                            <div class="icon-title">graph</div>
                        </div>
                    </div>
                    <div class="col-lg-1 col-md-2 col-sm-3 col-xs-4 icondemo-wrap vertical-align" data-name="new_user">
                        <div class="icondemo vertical-align-middle">
                            <i class="icon ml-new_user" aria-hidden="true"></i>
                            <div class="icon-title">new_user</div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<script src="/vendor/bootstrap-slider/bootstrap-slider.min.js"></script>
<script src="/js/examples/components/basic/icon.js"></script>
